<template>
  <div class="device-detail">
    <el-card class="device-detail-card">
      <template #header>
        <div class="card-header">
          <span>{{ device.name }} 详细信息</span>
          <el-button @click="router.back()">返回</el-button>
        </div>
      </template>
      <el-descriptions :column="2" bordered>
        <el-descriptions-item label="设备ID">{{ device.id }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ device.ip }}</el-descriptions-item>
        <el-descriptions-item label="当前状态">
          <el-tag :type="device.status === '在线' ? 'success' : 'danger'">
            {{ device.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最后活跃时间">2023-09-20 14:30</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const device = ref({} as any)

onMounted(async () => {
  const res = await axios.get(`http://127.0.0.1:5000/api/devices/${route.params.id}`)
  device.value = res.data.data
})
</script>
<style scoped>
.device-detail {
  padding: 30px;
  min-width: 1200px;
}

.device-detail-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  padding: 16px 20px;
}
</style>
